<script setup lang="ts">
import CustomNavbar from './components/CustomNavbar.vue';
import CategoryPanel from './components/CategoryPanel.vue';
import HotPanel from './components/HotPanel.vue';
import { ref } from 'vue';
import type { BannerItem, CategoryItem, HotItem } from '@/types/home';
import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/apis/home';
import { useGuessList } from '@/composable.ts'
//引入骨架屏
import homeSkeleton from './components/homeSkeleton.vue';
import { onLoad } from '@dcloudio/uni-app';
const BannerList = ref<BannerItem[]>([])
const CategoryList = ref<CategoryItem[]>([])
const HotList = ref<HotItem[]>([])
//控制骨架屏
const showSkeleton = ref(false)
//获取首页轮播图数据
const getHomeBanner = async () => {
    const res = await getHomeBannerAPI()
    // console.log(res.result);
    BannerList.value = res.result
}
//获取首页-前台分类-小程序
const getHomeCategory = async () => {
    const res = await getHomeCategoryAPI()
    // console.log(res, 888888);
    CategoryList.value = res.result
}

//首页-热门推荐-小程序
const getHomeHot = async () => {
    const res = await getHomeHotAPI()
    console.log(res);
    HotList.value = res.result
}

// import type { XtxGuessType } from '@/types/components'
// // 给添加类型标注
// const xtxguess = ref<XtxGuessType>()
// //滚动条事件
// const onScrollToLower = () => {
//     // console.log('到底了');
//     //触发XtxGuess组件里面的获取数据方法
//     xtxguess.value?.getMore()
// }

const { guessRef: xtxguess, onScrollToLower } = useGuessList()

onLoad(async () => {
    showSkeleton.value = true
    await Promise.all([
        getHomeBanner(),
        getHomeCategory(),
        getHomeHot()
    ])
    showSkeleton.value = false
})

//下拉刷新动画
const istriggered = ref(false)
//下拉刷新
const onRefresherrefresh = async () => {
    //开启下拉刷新动画
    istriggered.value = true
    //数据加载前重置数据
    xtxguess.value?.resetData()
    await Promise.all([getHomeBanner(), getHomeCategory(), getHomeHot()])
    istriggered.value = false
}


</script>

<template>
    <!-- 自定义导航栏 -->
    <CustomNavbar></CustomNavbar>
    <scroll-view class="scorllview" scroll-y @scrolltolower="onScrollToLower" refresher-enabled
        @refresherrefresh="onRefresherrefresh" :refresher-triggered="istriggered">
        <homeSkeleton v-if="showSkeleton" />
        <template v-else>
            <!-- 轮播图 -->
            <XtxSwiper :list="BannerList" />
            <!-- 首页分类 -->
            <CategoryPanel :list="CategoryList"></CategoryPanel>
            <!-- 热门推荐 -->
            <HotPanel :list="HotList"></HotPanel>
            <!-- 猜你喜欢 -->
            <XtxGuess ref="xtxguess"></XtxGuess>
        </template>
    </scroll-view>
</template>

<style lang="scss">
page {
    background-color: #F7F7F7;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.scorllview {
    flex: 1;
    overflow: hidden;
}
</style>
